<template>
    <div class="sidebar-wrapper">
        <div class="sidebar-head">
            <div class="sidebar-btn" :class="isDatasetPanel ? 'selected' : ''" @click="onNavToHome">
                <Document class="sidebar-btn-icon" />
                <div class="sidebar-btn-text">数据管理</div>
            </div>
            <div class="sidebar-btn" :class="props._current_panel === 'model_panel' ? 'selected' : ''"
                @click="onNavToModel">
                <Odometer class="sidebar-btn-icon" />
                <div class="sidebar-btn-text">模型管理</div>
            </div>
            <div class="sidebar-btn" :class="props._current_panel === 'remote_panel' ? 'selected' : ''"
                @click="onNavToRemote">
                <Monitor class="sidebar-btn-icon" />
                <div class="sidebar-btn-text">机器管理</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, computed, ref } from 'vue';
const props = defineProps(['_current_panel']);
const emit = defineEmits(['selectPanel', 'toggleRemoteList']);

const isDatasetPanel = computed(() => {
    return props._current_panel === 'home_panel' || props._current_panel === 'tool_panel' || props._current_panel === 'grid_panel';
});

function onNavToHome(event) {
    emit('selectPanel', 'home_panel');
}

function onNavToModel(event) {
    emit('selectPanel', 'model_panel');
}

function onNavToRemote(event) {
    // console.log('onNavToRemote');
    // emit('toggleRemoteList');
    emit('selectPanel', 'remote_panel');
}

onMounted(() => { });

defineExpose({});
</script>

<style scoped>
.sidebar-wrapper {
    background-color: rgb(48, 40, 40);
    width: 100%;
    height: 100%;
}

.title-font {
    padding: 10px;
    font-weight: bold;
    color: rgb(230, 230, 230);
    text-align: center;
}

.file-list {
    padding: 1px;
    height: 270px;
}

.sidebar-head {
    padding: 8px 5px 5px 5px;
    display: block;
    text-align: center;
}

.sidebar-foot {
    position: absolute;
    bottom: 0px;
    padding: 8px 5px 0px 5px;
    display: block;
    text-align: center;
}

.sidebar-btn {
    background-color: rgb(69, 65, 65);
    color: rgb(248, 248, 248);
    margin: 2px 4px 10px 4px;
    width: 48px;
    height: 48px;
    font-size: 10px;
    box-shadow: 1px 1px 1px rgb(150, 150, 149);
    cursor: pointer;
}

.sidebar-btn.selected {
    background-color: rgb(190, 75, 75);
}

.sidebar-btn-divider {
    border-color: rgb(107, 107, 107);
    margin: 12px 3px 8px 0px;
    padding-left: 2px;
}

.sidebar-btn:hover {
    background-color: rgb(190, 75, 75);
    color: rgb(230, 230, 230);
}

.sidebar-btn-icon {
    padding: 8px 0 0px 0;
    width: 2em;
    height: 2em;
    color: rgb(236, 231, 231);
}

.sidebar-btn-text {
    color: rgb(233, 226, 226);
    user-select: none;
    font-size: 9px;
}
</style>
